<template>
    <div class="header">
        <div class="header-right">
            {{ dateData.dateYear }} {{ dateData.dateWeek }} {{ dateData.dateDay }}
        </div>
        <div class="title">
            <span class="title-text">数聘慧显可视化大屏</span>
        </div>
        <div class="right-timer">
            <dv-decoration6 style="width:200px;height:30px; " />
        </div>
    </div>
</template>

<script setup>
import { ref, computed, reactive } from 'vue';
import { useRoute } from 'vue-router';
import dayjs from 'dayjs';
const menuList = ref([
    '可视化大屏', '招聘详情', 'Info', 'Orders'
])
const route = useRoute()

const dateData = reactive({
    dateDay: "",
    dateYear: "",
    dateWeek: "",
    timing: null
});
const weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
const timeFn = async () => {
    dateData.timing = setInterval(() => {
        dateData.dateDay = dayjs().format("YYYY-MM-DD hh : mm : ss");
        dateData.dateWeek = weekday[dayjs().day()];
    }, 1000);

};
timeFn()

computed(async () => {
    await function checkNav() {
        return route.path;
    }

})
async function handleOpen(key, keyPath) {
    console.log(key, keyPath)
}
async function handleClose(key, keyPath) {
    console.log(key, keyPath)
}

</script>
<style lang="scss" scoped>
.header {
    height: 8vh;
    background-image: url("@/assets/imgs/top.png");
    background-size: cover;
    background-position: center center;
    position: relative;

    .header-right {
        position: absolute;
        left: 20px;
        top: 20px;
        color: #fff;
    }

}

.title {
    text-align: center;
    background-size: cover;
    color: transparent;
    height: 8vh;
    position: absolute;
    top: 5px;
    left: 37vw;

    .title-text {

        z-index: -1;
        font-size: 38px;
        font-weight: 900;
        letter-spacing: 6px;
        width: 100%;
        background: linear-gradient(92deg,
                #0072ff 0%,
                #00eaff 48.8525390625%,
                #01aaff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.right-timer {
    position: absolute;
    right: 0;
    top: -8px;
    margin-right: 35px;
    margin-top: 25px;
    color: #fff;
    // font-weight: bold;
}
</style>
